<template>
	<view class="contain">
		<view class="view-wp">
			<u--image :src="model.image" width="690rpx" height="300rpx" :radius="8" mode="aspectFill"></u--image>
			<view class="left-price-box">
				<view class="left-price">
					{{model.price||"8888"}}
				</view>
				<view class="left-unit">
					元
				</view>
			</view>
			<view class="left-name">
				{{model.name||"礼品"}}代金券
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {

			};
		},
		props: ['model']
	}
</script>

<style lang="scss" scoped>
	.contain {
		width: 100%;
		display: flex;
		justify-content: center;
		background: #fff;

		.view-wp {
			padding: 32rpx;
			position: relative;

			.left-name {
				position: absolute;
				font-size: 60rpx;
				font-weight: 500;
				line-height: 60rpx;
				bottom: 70rpx;
				left: 100rpx;
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 500;
				background: linear-gradient(180deg, #F9D3A8 0%, #FEF7E8 46%, #F9D3A8 100%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;

			}

			.left-price-box {
				display: flex;
				align-items: flex-end;
				position: absolute;
				top: 80rpx;
				left: 100rpx;

				.left-price {

					font-size: 120rpx;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: bold;
					line-height: 120rpx;
					background: linear-gradient(180deg, #F9D3A8 0%, #FEF7E8 46%, #F9D3A8 100%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;

				}

				.left-unit {
					width: 50rpx;
					height: 50rpx;
					background: linear-gradient(180deg, #F9D3A8 0%, #FEF7E8 46%, #F9D3A8 100%);
					font-size: 28rpx;
					font-weight: 400;
					color: #922126;
					line-height: 50rpx;
					border-radius: 50%;
					text-align: center;
					position: relative;
					top: -4rpx;
				}

			}


			image {
				border-radius: 5rpx;
				width: 140rpx;
				height: 140rpx;
			}
		}
	}
</style>